<<<<<<< HEAD
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>ws页面</title>
    <meta charset="UTF-8">
	<script src="jquery-3.2.1.js"></script>
</head>
<body>
<input type="text" placeholder="房间号" id="room"><input type="text" placeholder="请输入您的昵称" id="userid"><input type="button" value="连接" id="btnClick1">
</div>
<div id="resultDiv"></div>
<div><input type="text" id="msg"><input type="button" value="发送" id="btnClick2" disabled="disabled"></div>
<script>
    var webSocket = null;
    $("#btnClick2").click(function () {
        var message = $("#msg").val();
        $("#msg").val('');
        var to='';
        /* webSocket.send(msg) */
        webSocket.send(JSON.stringify({
            message : {
                content : message,
                from : '${userid}',
                to : to,      //接收人,如果没有则置空,如果有多个接收人则用,分隔
                /* time : getDateFull() */
            },
            type : "message"
        }));
    });
    $("#btnClick1").click(function () {
        var room = $("#room").val();
        var userid = $("#userid").val();
        if(userid==null||userid=='') {
            alert("必须输入昵称");
            return;
        }
        $("#btnClick2").removeAttr("disabled");
        $(this).attr("disabled", "disabled");
        $("#resultDiv").append("<p>开始连接服务端!</p>");
      //判断当前浏览器是否支持WebSocket
        if ('WebSocket' in window) {
        	webSocket = new WebSocket("ws://192.168.20.8:8080/chat/"+room+"/"+userid);
        } else {
            alert('当前浏览器 Not support websocket')
        }
        webSocket.onerror = function (event) {
            $("#resultDiv").append("<p>onerror:" + event.data + "</p>");
        }
        webSocket.onopen = function (event) {
            $("#resultDiv").append("<p>连接成功！</p>");
        }
        webSocket.onmessage = function (event) {
            $("#resultDiv").append("<p>" + event.data + "</p>");
        }
    });
    
  //连接关闭的回调方法
    websocket.onclose = function () {
    	$("#resultDiv").append("<p>WebSocket连接关闭</p>");
    }
    
  //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () {
        closeWebSocket();
    }
    
  //关闭WebSocket连接
    function closeWebSocket() {
        websocket.close();
    }
</script>
</body>
=======
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>ws页面</title>
    <meta charset="UTF-8">
	<script src="jquery-3.2.1.js"></script>
</head>
<body>
<input type="text" placeholder="房间号" id="room"><input type="text" placeholder="请输入您的昵称" id="userid"><input type="button" value="连接" id="btnClick1">
</div>
<div id="resultDiv"></div>
<div><input type="text" id="msg"><input type="button" value="发送" id="btnClick2" disabled="disabled"></div>
<script>
    var webSocket = null;
    $("#btnClick2").click(function () {
        var message = $("#msg").val();
        $("#msg").val('');
        var to='';
        /* webSocket.send(msg) */
        webSocket.send(JSON.stringify({
            message : {
                content : message,
                from : '${userid}',
                to : to,      //接收人,如果没有则置空,如果有多个接收人则用,分隔
                /* time : getDateFull() */
            },
            type : "message"
        }));
    });
    $("#btnClick1").click(function () {
        var room = $("#room").val();
        var userid = $("#userid").val();
        if(userid==null||userid=='') {
            alert("必须输入昵称");
            return;
        }
        $("#btnClick2").removeAttr("disabled");
        $(this).attr("disabled", "disabled");
        $("#resultDiv").append("<p>开始连接服务端!</p>");
      //判断当前浏览器是否支持WebSocket
        if ('WebSocket' in window) {
        	webSocket = new WebSocket("ws://192.168.20.8:8080/chat/"+room+"/"+userid);
        } else {
            alert('当前浏览器 Not support websocket')
        }
        webSocket.onerror = function (event) {
            $("#resultDiv").append("<p>onerror:" + event.data + "</p>");
        }
        webSocket.onopen = function (event) {
            $("#resultDiv").append("<p>连接成功！</p>");
        }
        webSocket.onmessage = function (event) {
            $("#resultDiv").append("<p>" + event.data + "</p>");
        }
    });
    
  //连接关闭的回调方法
    websocket.onclose = function () {
    	$("#resultDiv").append("<p>WebSocket连接关闭</p>");
    }
    
  //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () {
        closeWebSocket();
    }
    
  //关闭WebSocket连接
    function closeWebSocket() {
        websocket.close();
    }
</script>
</body>
>>>>>>> 76b6f31bbcbec31ccfa63ebf7ff5aeaf5445e070
</html>